<template>
  <el-input
    type="text"
    v-bind="$attrs"
    v-model.trim="Val"
    :placeholder="placeholder"
    :clearable="clearable"
    :minlength="minlength"
    :maxlength="maxlength"
    :disabled="disabled"
    style="width: 100%"
  />
</template>
<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: String,
    default: () => ''
  },
  label: {
    type: String,
    default: () => ''
  },
  placeholder: {
    type: String,
    default: () => ''
  },
  clearable: {
    type: Boolean,
    default: () => true
  },
  minlength: {
    type: Number,
    default: () => 0
  },
  maxlength: {
    type: Number
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})
const placeholder = computed(() => props.placeholder || `请输入${props.label}`)
const Val = ref(props.modelValue)
//监听父组件的值
watch(
  () => props.modelValue,
  () => {
    Val.value = props.modelValue
  }
)

// 通过emit将值传递给父组件
emit('update:modelValue', Val)
</script>
